@charset "utf-8";
@function n($px) {
    @return $px/2;
}
.clear {
    clear: both;
}
.InsidePages_2.active {
    .option {
        div {
            animation-name: bounceInLeft;
        }
    }
    .issue{
        h2{
            animation-name: bounceInDown;
            &:last-of-type{
                animation-name:bounceInLeft;
                animation-delay: 1s;
            }
        }
        
    }
}
    .InsidePages_2 {
        background: url("../img/evaluate.jpg") no-repeat;
        height: 100%;
        background-size: cover;
        .issue {
            width: n(560px);
            margin: 0 auto; //      text-align: center;
            padding-top: n(104px);
            position: relative;
            h2 {
                font-size: n(32px);
                color: white;
                text-shadow: 0 0 10px #459cf9,0 0 30px #459cf9,0 0 40px #459cf9,0 0 70px #459cf9,0 0 80px #459cf9,0 0 100px #459cf9,0 0 150px #459cf9;
                &:last-of-type {
                    padding-bottom: n(40px);
                }
            }
            P {
                font-size: n(28px);
                color: #fff000;
                font-weight: bolder;
                text-align: center;
                text-shadow: 0 0 10px #459cf9,0 0 30px #459cf9,0 0 40px #459cf9,0 0 70px #459cf9,0 0 80px #459cf9;
            }
            .pear {
                width: n(250px);
                margin: -15px auto 0;
                animation-name: swing;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            .cloud_1 {
                width: n(110px);
                position: absolute;
                bottom: -10px;
                animation-name: hinge;
                animation-duration: 7s;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            .cloud_2 {
                width: n(64px);
                position: absolute;
                bottom: -5px;
                right: 45px;
                animation-name: zoomInDown;
                animation-duration: 5s;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
            .cloud_3 {
                width: n(76px);
                position: absolute;
                bottom: 5px;
                right: -30px;
                animation-name: bounceInLeft;
                animation-duration: 5s;
                animation-iteration-count: infinite;
                img {
                    width: 100%;
                }
            }
        }
        .op {
            width: n(600px);
            margin: 0 auto;
            margin-top: n(-30px);
            .option {
                width: n(370px);
                display: inline-block;
                margin-top: n(30px);
                margin-left: n(20px);
                div {
                    width: 100%;
                    height: 30px;
                    margin: 10px 0;
                    background: url("../img/InsidePages_31.png") no-repeat;
                    background-size: 100%;
                    line-height: n(50px);
                    padding-left: n(20px);
                }
            }
            .note {
                display: inline-block;
                position: relative;
                width: n(200px);
                margin-left: n(-40px);
                .photo {
                    width: n(90px);
                    position: absolute;
                    bottom: n(-80px);
                    left: n(60px);
                    animation-name: bounce;
                    animation-iteration-count: infinite;
                    img {
                        width: 100%;
                    }
                }
                .note_1 {
                    width: n(70px);
                    position: absolute;
                    bottom: n(140px);
                    right: n(-20px);
                    animation-name: rubberBand; //              无限重复
                    animation-iteration-count: infinite;
                    img {
                        width: 100%;
                    }
                }
                .note_2 {
                    width: n(46px);
                    position: absolute;
                    bottom: n(90px);
                    right: n(-30px);
                    animation-name: rubberBand; //              无限重复
                    animation-iteration-count: infinite;
                    img {
                        width: 100%;
                    }
                }
                .note_3 {
                    width: n(46px);
                    position: absolute;
                    bottom: n(40px);
                    right: n(-16px);
                    animation-name: rubberBand; //              无限重复
                    animation-iteration-count: infinite;
                    img {
                        width: 100%;
                    }
                }
                .note_4 {
                    width: n(46px);
                    position: absolute;
                    bottom: n(-10px);
                    right: 0;
                    animation-name: rubberBand; //              无限重复
                    animation-iteration-count: infinite;
                    img {
                        width: 100%;
                    }
                }
                .note_5 {
                    width: n(40px);
                    position: absolute;
                    top: 0;
                    right: n(-10px);
                    animation-name: rubberBand; //              无限重复
                    animation-iteration-count: infinite;
                    img {
                        width: 100%;
                    }
                }
            }
        }
    }